<template>
  <div class="sing-comment" v-if="skillCommentDatas.length">
    <ul>
      <li v-for="(data,index) in skillCommentDatas" :key="data._id" ref="list">
        <div class="comment-wrapper">
          <div class="cover">
            <img :src="data.sendUserCoverUrl | squareUrls" alt />
          </div>
          <span class="userName">{{data.sendUserName}}</span>
          <span>评论时间：{{data.created | setDate}}</span>
          <span class="z-index">~{{skillCommentDatas.length - index}}楼</span>
          <div class="btn">
            <el-badge :value="data.commentId | commentStarFilter(star)" class="badge">
              <el-button size="mini" @click="commentStar(data)">
                赞
                <!-- <i class="el-icon-s-opportunity"></i> -->
              </el-button>
            </el-badge>
            <el-button class="return-omment" size="mini" @click="showReturnArea(index)">回复</el-button>
          </div>
        </div>
        <div class="comment">{{data.commentData}}</div>
        <div v-if="closeFirstComment">
          <skill-return-comment
            v-if="userName || userInfoData"
            ref="skillCommentChild"
            :returnFlog="returnFlog"
            :userName="userName"
            :userInfoData="userInfoData"
            @_sendReturnCommentData="_sendReturnCommentData"
            :data="data"
            :index="index"
          ></skill-return-comment>
        </div>

        <div class="child-coment" v-if="data.children.length">
          <ul>
            <li v-for="(child,index2) in data.children" :key="child._id">
              <div class="return-user">
                <p>
                  {{child.returnUserName}} 回复：
                  <strong>{{child.userName}}</strong> 的
                  <i>{{child.commentData}}</i>
                </p>
                <div class="return-text">
                  <p>{{child.returnText}}</p>
                </div>
              </div>
              <div class="return-right">
                <p>{{child.updated | setDate}}</p>
                <el-button size="mini" @click="showReturnArea2(index,index2)">回复</el-button>
              </div>
              <div v-if="closeSecondComent" class="second-wrapper">
                <skill-return-comment
                  v-if="userName || userInfoData"
                  ref="skillCommentChild2"
                  class="skillCommentChild2"
                  :userName="userName"
                  :userInfoData="userInfoData"
                  @_sendReturnCommentData="_sendReturnCommentData2"
                  :data="child"
                  :index2="index2"
                  :index="index"
                  :returnFlog="returnFlog"
                  :returnFlog2="returnFlog2"
                ></skill-return-comment>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import skillReturnComment from "@/views/readskill/skillReturnComment.vue";
import { mapActions } from "Vuex";
export default {
  name: "sing-comment",
  components: {
    "skill-return-comment": skillReturnComment
  },
  props: {
    skillCommentDatas: {
      type: Array,
      default() {
        return [];
      }
    },
    skillData: {
      type: Object,
      default() {
        return {};
      }
    },
    userInfoData: {},
    userName: {
      type: String,
      default() {
        return "";
      }
    },
    star: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    _sendMessageToUser(skillCommentData, data) {
      if (this.userName) {
        this.sendMessageToUser({
          text: skillCommentData,
          sendUserName: this.userInfoData.userName || this.userName,
          userName: data,
          sendCoverUrl: this.userInfoData.coverUrl || "",
          system: true,
          id: this.skillData._id,
          label: this.skillData.label,
          type: this.$route.path.split("/")[1]
        })
          .then(res => {
            console.log("ok");
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      } else {
        alert("你还未登录，无法给作者留言！");
      }
    },
    commentStar(data) {
      this.$emit("_commentStar", data);
    },
    _sendReturnCommentData2({ data, skillCommentData, index }) {
      let collections = {
        userName: data.returnUserName,
        commentId: data.commentId,
        commentData: data.returnText,
        userCoverUrl: data.returnCoverUrl,

        returnText: skillCommentData,
        returnUserName: this.userInfoData.userName || this.userName,
        returnCoverUrl: this.userInfoData.coverUrl || "",
        skillId: this.skillCommentDatas[index].skillId
      };

      this.setCommentChildrenData(collections)
        .then(res => {
          if (res.data.ok === 1) {
            // try {
            //   let document = this.$refs.list[
            //     this.returnFlog
            //   ].getElementsByClassName("skillCommentChild2");
            //   let arr = Array.prototype.slice.call(document);
            //   arr[0].getElementsByTagName("textarea")[0].value = "";
            // } catch {
            //   console.log("错误");
            // }

            this.$emit("_updateSkillCommentData");

            this._sendMessageToUser(skillCommentData, data.returnUserName);

            alert(res.data.data);
          } else {
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _sendReturnCommentData({ data, skillCommentData, index }) {
      let collections = {
        userName: data.sendUserName,
        commentId: data.commentId,
        commentData: data.commentData,
        userCoverUrl: data.sendUserCoverUrl,

        returnText: skillCommentData,
        returnUserName: this.userInfoData.userName || this.userName,
        returnCoverUrl: this.userInfoData.coverUrl || "",

        skillId: this.skillCommentDatas[index].skillId
      };

      this.setCommentChildrenData(collections)
        .then(res => {
          if (res.data.ok === 1) {
            this.$refs.skillCommentChild[index].skillCommentData = "";
            this.$emit("_updateSkillCommentData");
            this._sendMessageToUser(skillCommentData, data.sendUserName);
            alert(res.data.data);
          } else {
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showReturnArea(index) {
      if (this.userInfoData || this.userName) {
        this.closeFirstComment = true;
        this.closeSecondComent = false;
        this.returnFlog = index;
      } else {
        alert("你还没有登录，请登录再回复评论！");
      }
    },
    showReturnArea2(index, index2) {
      if (this.userInfoData || this.userName) {
        this.returnFlog = index;
        this.returnFlog2 = index2;
        this.closeSecondComent = true;
        this.closeFirstComment = false;
      } else {
        alert("你还没有登录，请登录再回复评论！");
      }
    },
    ...mapActions("user", ["setCommentChildrenData", "sendMessageToUser"])
  },
  data() {
    return {
      returnFlog: 0,
      returnFlog2: 0,
      closeFirstComment: false,
      closeSecondComent: false
    };
  },
  filters: {
    commentStarFilter(id, star) {
      let newData = [];
      for (let i = 0; i < star.length; i++) {
        if (star[i].commentId) {
          if (star[i].commentId === id) {
            newData.push(star[i]);
          }
        }
      }
      return newData.length;
    }
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.sing-comment
  width: 100%
  overflow: hidden
  >ul
    width: 100%
    overflow: hidden
    >li
      width: 100%
      padding: 20px 10px
      border-bottom: 5px dotted #eee
      overflow: hidden
      .comment-wrapper
        width: 100%
        height: 32px
        position: relative
        @include flex(flex-start,center)
        .cover
          flex: 0 0 32px
          height: 100%
          overflow: hidden
          border-radius: 5px
          @include flex(center,center)
          img
            width: 100%
            height: auto
        span
          margin-left: 20px
        .userName
          color: #000
          font-weight: 700
        .z-index
          position: absolute
          right: 160px
          width: 60px
          height: 100%
          color: #aaa
          @include flex(center,center)
        .btn
          position: absolute 
          right: 0
          @include flex(center,center)
          .badge
            margin-right: 30px
      .comment
        margin-top: 5px
        line-height: 20px
        min-height: 40px
        padding: 0 52px
      .child-coment
        width: 100%
        overflow: hidden
        >ul
          margin-left: 5%
          width: 95%
          padding: 10px 20px
          overflow: hidden
          >li
            border: 1px solid #f9f9f9
            padding: 10px
            overflow: hidden
            margin-bottom: 5px
            flex-wrap: wrap
            @include flex(flex-start,flex-start)            
            .return-user
              flex: 0 0 80%
              overflow: hidden
              >p
                width: 100%
                height: 25px
                overflow: hidden
                text-overflow: ellipsis
                white-space: nowrap
                >i
                  color: #999                  
              >.return-text
                width: 100%
                line-height: 25px
                color: #0487dc
                padding: 0 10px
            .return-right
              flex: 1
              text-align: right
              >p
                height: 25px  
                @include text-overflow()
            .second-wrapper            
              flex: 0 0 100%              
      &:last-child
        border-bottom: none
</style>